<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义对象</title>
    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/Vue3.js"></script>
    <script type="text/javascript" src="./lib/ElementPlus/index.js"></script>
    <link rel="stylesheet" href="./lib/ElementPlus/index.css" />
  </head>
  <body>
    <div id="dom">
      <div id="player"></div>

      <div class="btn-list">
        <div
          onclick="addVehicle('vc1',[8078.4331250000005, 4737.8184179687505, 3.004052734375],'SUV_01',[0,110,0])"
          class="btn"
        >
          添加车辆
        </div>
        <el-dropdown placement="bottom" @command="moveVehicle">
          <div class="btn">移动车辆</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="start">开始移动</el-dropdown-item>
              <el-dropdown-item command="pause">暂停移动</el-dropdown-item>
              <el-dropdown-item command="continue">继续移动</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown placement="bottom" @command="simulatedAccident">
          <div class="btn">模拟事故</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="rescue">火警车救援</el-dropdown-item>
              <el-dropdown-item command="complete">救援完成</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, ref } = Vue
      /**
       * 汽车状态选择
       */
      const moveVehicle = async command => {
        switch (command) {
          case 'start':
            startMove('vc1', coordinates)
            break
          case 'pause':
            fdapi.vehicle.pause('vc1')

            break
          case 'continue':
            fdapi.vehicle.resume('vc1')
            break

          default:
            break
        }
      }
      /**
       * 添加车
       */
      const addVehicle = async (
        id,
        coordinate,
        type,
        rotation = [0, 110, 0]
      ) => {
        await fdapi.vehicle.delete(id)
        let vc1 = {
          id: id,
          coordinateType: 0,
          coordinate: coordinate,
          assetPath: '/JC_CustomAssets/VehicleLibrary/Exhibition/' + type, //资源库车辆路径
          rotation: [0, 0, 0],
          colorType: 0, //0: 使用随机涂装颜色  大于0的正整数: 使用固定涂装颜色
          autoHeight: true,
          localOffset: [0, 0, 0],
          supportAttach: true
        }
        fdapi.vehicle.add(vc1)
        let vc2 = {
          id: id,
          rotation: rotation
        }
        fdapi.vehicle.update(vc2)
      }
      /**
       * 开始移动
       */
      const startMove = async (id, locations, v = 60) => {
        const moveList = []

        let time = 0
        // 轨迹遍历
        locations.forEach((item, index) => {
          if (index !== 0) {
            const m = calculateDistance(
              item[0],
              item[1],
              locations[index - 1][0],
              locations[index - 1][1]
            )

            const s = (m / 1000 / v) * 3600
            time += s
          }

          const elementPoint = {
            timeStamp: Number(time.toFixed(2)),
            coordinate: locations[index],
            gear: 3
          }
          moveList.push(elementPoint)
        })

        let wayPoints = [{ id, wayPoints: moveList }]
        await __g.vehicle.setWayPoint(wayPoints)

        await __g.vehicle.start([{ id, timeStamp: 0 }]) //设置载具v1从wayPoints的第0秒开始运动 }

        return time
      }
      // 添加火种
      const addFirm = async coordinate => {
        await __g.customObject.delete('o1')
        let o = {
          id: 'o1', //自定义对象唯一id
          pakFilePath: '@path:DTS_Library.pak', //资源库pak文件路径,推荐使用cloud内置的文件资源管理器加载pak并使用@path方式传入参数
          assetPath: '/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_11', //资源目录，自定义对象在pak文件资源包里的相对路径
          location: coordinate, //位置坐标
          coordinateType: 0, // 坐标系类型
          rotation: [0, 0, 0], // 世界坐标系旋转
          range: [0, 1000], //可见范围
          groupId: 'coGroup', //分组id
          localRotation: [0, 0, 0], //模型自身旋转
          scale: [2, 2, 1], //模型缩放
          isEffectRotation: true, //是否开启旋转效果
          smoothMotion: 1, //1: 平滑移动，0: 跳跃移动
          supportAttach: false, //不支持贴画贴合
          visible: true //模型加载后默认是否显示
        }
        await __g.customObject.add(o)
      }
      /**
       * 计算两点距离
       */
      const calculateDistance = (x1, y1, x2, y2) => {
        var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
        return distance
      }
      /**
       * 模拟事故事件选择
       */
      const simulatedAccident = async command => {
        switch (command) {
          case 'rescue':
            rescueFire()
            break
          case 'complete':
            rescueComplete()
            break
          default:
            break
        }
      }

      // 消防车救援路线
      let startLine = ref([])
      // 消防车离开路线
      let endLine = ref([])
      /**
       * 火情救援
       */
      const rescueFire = async () => {
        fdapi.vehicle.pause('vc1')
        let endPoint = ref(0)
        let info = await __g.vehicle.get('vc1')
        endPoint.value = info.data[0].coordinate
        await addFirm(endPoint.value)
        await addVehicle(
          'fireCar',
          [8107.4289453125, 4807.655751953125, 2.999033203125],
          '消防车_1'
        )
        startLine.value.length = 0
        endLine.value.length = 0

        const Distance = calculateDistance(
          fireEnginePoint[0][0],

          fireEnginePoint[0][1],
          endPoint.value[0],

          endPoint.value[1]
        )
        let minDistance = Distance

        fireEnginePoint.forEach(item => {
          const Distance = calculateDistance(
            item[0],
            item[1],
            endPoint.value[0],
            endPoint.value[1]
          )
          if (minDistance >= Distance) {
            minDistance = Distance
            startLine.value.push(item)
          } else {
            endLine.value.push(item)
          }
        })
        // 获取列车离开的坐标
        endLine.value.unshift(startLine.value[startLine.value.length - 1])
        await startMove('fireCar', startLine.value, 80)
      }
      /**
       * 救援完成
       */
      const rescueComplete = async () => {
        await __g.customObject.delete('o1')
        await startMove('fireCar', endLine.value, 80)
      }

      // 小车路径
      let coordinates = [
        [8078.4331250000005, 4737.8184179687505, 3.004052734375],
        [8068.865, 4712.963671875, 2.99912109375],
        [8062.1557812500005, 4695.735234375, 2.9990625],
        [8056.28587890625, 4680.34927734375, 2.999052734375],
        [8048.29466796875, 4664.033896484375, 2.99912109375],
        [8039.3080859375, 4643.7650390625, 2.99900390625],
        [8033.030859375001, 4629.78267578125, 2.9990234375],
        [8024.35984375, 4612.90966796875, 2.999033203125]
      ]
      // 消防车路径
      let fireEnginePoint = [
        [8107.4289453125, 4807.655751953125, 2.999033203125],
        [8103.99587890625, 4796.155205078125, 2.9990478515625],
        [8100.398671875, 4785.888168945313, 2.9990380859375],
        [8098.79076171875, 4780.422724609375, 3.0140966796875],
        [8095.5460546875, 4771.015590820312, 2.9990380859375],
        [8091.461035156251, 4760.550185546875, 2.9990283203125],
        [8088.291328125, 4751.87177734375, 2.9990380859375],
        [8084.2694140625, 4742.201669921875, 2.99904296875],
        [8081.3428320312505, 4734.646640625, 2.999033203125],
        [8077.48509765625, 4725.866611328125, 2.9991064453125],
        [8073.70935546875, 4716.8674902343755, 2.9991015625],
        [8070.3691992187505, 4707.915859375, 2.9990380859375],
        [8064.45875, 4692.504541015625, 2.999072265625],
        [8057.562734375, 4676.1015625, 2.9989990234375],
        [8052.85037109375, 4664.807226562501, 2.999296875],
        [8047.058281250001, 4651.865390625, 2.9990136718750002],
        [8038.6850390625, 4633.69845703125, 2.9990234375],
        [8032.1452734375, 4619.993203125, 2.9990185546875],
        [8027.7088671875, 4610.97419921875, 2.9990234375]
      ]

      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset(1 | 2 | 4)
            }
          }
        })
      }
      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      const app = createApp({
        setup() {
          // 页面加载调用
          window.addEventListener('load', OnLoad, true)
          // 页面窗口变换调用
          window.addEventListener('resize', onResize, true)
          return {
            moveVehicle,
            startMove,
            simulatedAccident,
            rescueFire,
            addFirm,
            rescueComplete
          }
        }
      })
      app.use(ElementPlus).mount('#dom')

      /**
       * 页面离开事件(离开时清除此页面的操作及重置场景)
       */
      window.onunload = function (e) {
        // 重置场景
        fdapi.reset(1 | 2 | 4)
      }
    </script>
  </body>
</html>
